import React from 'react';
import Title from './title';
import { Carousel, WingBlank } from 'antd-mobile';
import { useHistory } from 'react-router';
import Lazyload from 'react-lazyload';
import style from './Topic.module.scss';

interface Iprops {
    topicList: Array<object>,
}
const Topic: React.FC<Iprops> = props => {
    const history = useHistory();
    return <div className={style.topic}>
        <Title title="专题精选" background="#fff" />
          <WingBlank>
            <Carousel className="space-carousel"
                dots={false}
                infinite
            >
                {
                    props.topicList.map((item: any) => (
                        <div className={style.item}
                            key={item.id}
                            onClick={() => history.push(`/topicDetail/${item.id}`)}
                        >
                     
                                <Lazyload  height={400} offset={750}>
                                    <img 
                                        src={item.item_pic_url} 
                                        style={{ width: '100%', verticalAlign: 'top' }}
                                        alt="" 
                                    />
                                </Lazyload>
                        
                            <p>{item.title} <b>￥ {item.price_info}元起</b></p>
                            <p>{item.subtitle}</p>
                        </div>
                    ))
                }
            </Carousel>
        </WingBlank>
    </div>
}

export default Topic